<lv-treetable
  [lvData]="data"
  #lvTable
  [lvPaginator]="page"
  lvSort
  #sort="lvSort"
  [lvSortDirct]="sort"
  (lvSortChange)="page.jumpToFisrtPage()"
  (lvStateChange)="stateChange($event)"
  lvCompareWith="data.id"
>
  <thead>
  <tr>
    <th lvCellKey="data.name">Name</th>
    <th
      lvCellKey="data.age"
      lvShowSort
      [lvCustomSort]="customSortAge"
      lvShowFilter
      [lvFilters]="ageFilters"
      (lvFilterChange)="filterChange($event)"
    >
      Age
    </th>
    <th
      lvCellKey="data.random"
      lvShowFilter
      [lvFilters]="randomFilters"
      [lvCustomFilter]="customFilterRandom"
      (lvFilterChange)="filterChange($event)"
      lvShowSort
    >
      Random
    </th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngTemplateOutlet="bodyContentTpl; context: { $implicit: lvTable.renderData, level: 0 }"></ng-container>

  <!-- template -->
  <ng-template #bodyContentTpl let-data let-level="level">
    <ng-container *ngFor="let item of data">
      <tr>
        <td [lvShowExpanded]="!!item.children?.length" [(lvExpanded)]="item.expanded" [lvPaddingLeft]="level * 24 + 'px'">
          {{ item.data.name }}
        </td>
        <td><input lv-input [(ngModel)]="item.data.age" style="width: 100%" /></td>
        <td>{{ item.data.random }}</td>
      </tr>
      <ng-container *ngIf="item.expanded && item.children?.length">
        <ng-container *ngTemplateOutlet="bodyContentTpl; context: { $implicit: item.children, level: level + 1 }"></ng-container>
      </ng-container>
    </ng-container>
  </ng-template>
  </tbody>
</lv-treetable>
<lv-paginator #page lvPageSize="5"></lv-paginator>
